<!--
 * @Author: mhb
 * @Date: 2021-09-28 11:28:50
 * @LastEditTime: 2021-11-04 11:33:09
 * @LastEditors: Please set LastEditors
 * @Description: 实测实量地图左侧边栏：责任区域树；测量进度、测量点位列表根据状态显示其中一个
 * @FilePath: \cscec-pms-admin\src\views\quality\measuredAmount\map\components\MapSideBarLeft.vue
-->
<template>
  <a-col :span="4">
    <a-card :bordered="false">
      <div class="mb12 button-warp">
        <a-button type="link" icon="arrow-left" @click="handleClose">返回</a-button>
        <a-button type="link" @click="visible = true" v-if="outsideTreeList.length > 0 && !isView">继承</a-button>
      </div>
      <tree-search
        class="mb12"
        :defaultHeight="'calc('+GET_REDRESS_PERCENTAGE * 0.4+'vh)'"
        :minHeight="'calc('+GET_REDRESS_PERCENTAGE * 0.4+'vh)'"
        :style="{maxHeight: 'calc('+GET_REDRESS_PERCENTAGE * 0.4 +'vh)',  overflowY: 'auto', overflowX: 'hidden'}"
        ref="treeSearch"
        @loader="$emit('handleLoader')"
        :autoSelect="false"
        :selectedKeys.sync="selectedKeys"
        :selectOptions.sync="selectOptions"
        isAll
        emptyDescription="暂无区域信息"
        :replaceFields="{ children: 'children', title: 'name', key: 'id' }"
        :outsideTreeList="outsideTreeList"
        :outsideTreeSpinning="outsideTreeSpinning"
      >
        <a-icon
          slot-scope="{ data }"
          v-if="data.check"
          slot="nameAfter"
          type="check-circle"
          style="margin: 4px; color: #00ac5a"
        />
      </tree-search>
    </a-card>
    <!-- 点位列表 -->
    <a-card :loading="loading" :bordered="false" :style="'height: calc('+GET_REDRESS_PERCENTAGE * 0.6+'vh - 117px); overflow: hidden; margin: 0'">
      <div v-if="!!isView">
        <div class="mb12">
          <b>测量进度</b>
        </div>
        <div v-if="Object.keys(countVO).length">
          <div class="ml20 mb12">点位数量：{{ countVO.pointNum || 0 }}</div>
          <div class="ml20 mb12">已测数量：{{ countVO.measureNum || 0 }}</div>
          <div class="ml20">测量进度：{{ countVO.measureRate || 0 }}%</div>
        </div>
        <empty v-else description="暂无测量进度" />
      </div>
      <div v-else class="listBox">
        <div class="mb12">
          <b>点位</b>
        </div>
        <a-spin ref="menuList" :spinning="loading" class="menuList">
          <a-menu v-model="activePoint" v-if="pointList.length > 0" mode="inline">
            <a-menu-item :ref="`menu_${index}`" v-for="(item, index) in pointList" :key="index">
              <a-row>
                <a-col :span="4">{{ index + 1 }}</a-col>
                <a-col :span="20">
                  <div align="center">
                    <ellipsis tooltip :length="16" placement="right">{{ item.name }}</ellipsis>
                    <span v-if="item.status == 0" class="del_btn">（停用）</span>
                  </div>
                </a-col>
              </a-row>
            </a-menu-item>
          </a-menu>
          <empty v-else description="暂无点位" />
        </a-spin>
        <a-row type="flex" justify="center" align="middle" class="listAction">
          <a-button
            v-btnPermission="'qm_010_edi_01'"
            size="small"
            :disabled="activePoint.length < 1 || !currentPoint.mapId"
            class="btn_right"
            type="primary"
            @click="isEdit = true"
            >编辑</a-button
          >
          <a-button
            v-btnPermission="'qm_010_del_02'"
            size="small"
            :type="currentPoint.status == 0 ? 'primary' : 'danger'"
            :disabled="activePoint.length < 1 || !currentPoint.mapId"
            @click="$emit('handleSwitch')"
            >{{ currentPoint.status == 0 ? '启用' : '停用' }}</a-button
          >
        </a-row>
      </div>
    </a-card>
    <!-- 继承点位 -->
    <dialog-inherit
      ref="dialogChoose"
      :visible.sync="visible"
      :projectId="projectId"
      :outsideTreeList="outsideTreeList"
      :width="800"
      headerTitle="继承点位"
      @submitInherit="submitInherit"
      ></dialog-inherit>
    <!-- 表单弹窗 -->
    <dialog-form
      ref="dialogForm"
      :visible.sync="isEdit"
      editModel="E"
      :form="currentPoint"
      headerTitle="编辑点位"
      :width="600"
      :rules="rules"
      :formList="formList"
      @confirm="(e) => $emit('submitForm', e, true)"
    ></dialog-form>
  </a-col>
</template>
<script>
import TreeSearch from '@/components/businessComponents/TreeSearch' // 树
import { Empty } from 'ant-design-vue' // 无数据提示
import { Ellipsis } from '@/components' // 省略文字
import DialogForm from '@/components/DialogForm' // 表单弹窗
import DialogInherit from '@/views/quality/measuredAmount/map/components/DialogInherit.vue' // 选择测量点位
import { setSubItem } from '@/api/quality/currency' // api
import {mapGetters } from 'vuex'
export default {
  name: 'MapSideBarLeft',
  components: {
    TreeSearch,
    Empty,
    DialogForm,
    Ellipsis,
    DialogInherit
  },
  props: {
    // 选中节点
    keys: {
      type: Array,
      default: () => []
    },
    // 选中节点对象
    options: {
      type: Object,
      default: () => ({})
    },
    // 选中点位
    point: {
      type: Array,
      default: () => []
    },
    // 选中点位对象
    currentPoint: {
      type: Object,
      default: () => ({})
    },
    // 点位坐标列表
    pointList: {
      type: Array,
      default: () => []
    },
    // 测量进度
    countVO: {
      type: Object,
      default: () => ({})
    },
    // 点位信息加载控件
    loading: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      outsideTreeList: [],
      outsideTreeSpinning: false,
      projectId: this.$route.query.projectId, // 项目id
      isView: this.$route.query.isView, // 是否为查看操作
      isEdit: false, // 点位编辑控件
      visible: false,
      rules: {
        name: [{ required: true, whitespace: true, message: '请输入点位名称', trigger: 'change' }]
      }, // 校验规则
      formList: [
        {
          type: 'BaseInput',
          span: 24,
          label: '点位名称',
          keyName: 'name'
        }
      ] // 表单列表
    }
  },
  computed: {
    ...mapGetters(['GET_REDRESS_PERCENTAGE']),
    // 选中节点
    activePoint: {
      get: function () {
        return this.point
      },
      set: function (e) {
        this.$emit('update:point', e)
      }
    },
    // 选中节点
    selectedKeys: {
      get: function () {
        return this.keys
      },
      set: function (e) {
        this.$emit('update:keys', e)
      }
    },
    // 选中节点对象
    selectOptions: {
      get: function () {
        return this.options
      },
      set: function (e) {
        this.$emit('update:options', e)
      }
    }
  },
  methods: {
    /**
     * 关闭窗口
     */
    handleClose() {
      window.close()
    },
    submitInherit() {
      this.visible = false
      this.getDistrictList()
    },
    getDistrictList() {
      return new Promise(resolve => {
        this.outsideTreeSpinning = true
        setSubItem.getList({isMap: true, id: this.projectId, sources: 0}).then(res => {
          if (res && res.data) {
            this.outsideTreeList = res.data
            this.selectedKeys = [res.data[0].id]
            resolve(res.data)
          }
          this.outsideTreeSpinning = false
        }).catch(() => {
          this.outsideTreeSpinning = false
        })
      })

      }
  }
}
</script>

<style lang="less" scoped>
/deep/ .listBox {
  position: relative;
  padding-bottom: 40px;
  .menuList {
    overflow: auto;
    scrollbar-width: none;
    height: calc(var(--heightVh) * 0.6 - 228px);
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .ant-menu-inline,
  .ant-menu-vertical,
  .ant-menu-vertical-left {
    border: 1px solid #fff;
  }
}
.listAction {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 40px;
  width: 100%;
  background: #fff;
}
.button-warp {
  display: flex;
  justify-content: space-between;
}
</style>